<template>
  <div class="goods">
    <div class="breadcrumb-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-alert title="添加商品信息" :closable="false" type="info" center show-icon></el-alert>
    <el-steps
      class="step-wrap"
      align-center
      :space="200"
      :active="+currentIndex"
      finish-status="success"
    >
      <el-step v-for="(item, index) in stepArr" :key="index" :title="item"></el-step>
    </el-steps>
    <el-tabs
      class="tab-wrap"
      v-model="currentIndex"
      tab-position="left"
      @tab-click="tabClick"
    >
      <el-tab-pane name="1" label="基本信息">
        <el-form label-position="top" label-width="80px" :model="normalData">
          <el-form-item label="商品名称">
            <el-input v-model="normalData.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="normalData.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="normalData.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="normalData.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-cascader
              v-model="normalData.goods_cat"
              clearable
              :options="normalOptions"
              :props="{ 
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name'
                }"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="2" label="商品参数">
        <ul>
          <li v-for="(item, index) in normalData.attrs" :key="index">
            <h4 style="padding: 28px 0;">{{item.attr_name}}</h4>
            <div>
              <el-checkbox
                @change="removeItem(index, _index)"
                v-for="(_item, _index) in item.attr_vals"
                indeterminate
                :key="_index"
                :label="_item"
                border
              ></el-checkbox>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane name="3" label="商品属性">
        <el-form label-position="top" label-width="80px" :model="normalData.goods_attrs">
          <el-form-item
            :label="item.attr_name"
            v-for="item in normalData.goods_attrs"
            :key="item.attr_id"
          >
            <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="4" label="商品图片">
        <el-upload
          class="upload-demo"
          :action="url"
          :headers="headers"
          list-type="picture"
          :on-success="getUrl"
          :on-remove="removeUrl"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane name="5" label="商品内容">
          <el-button @click="publicGoods">发布商品</el-button>
          <quill-editor v-model="normalData.goods_introduce" ref="editor"></quill-editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import {
  getCategoriesLists,
  getManyAttr,
  getOnlyAttr,
  uploadImg,
  publicGoods
} from "@/http/api";
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      stepArr: ["基本信息", "商品参数", "商品属性", "商品图片", "商品内容"],
      currentIndex: "1",
      normalData: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: "",
        goods_attrs: null,
        goods_introduce: '',
        attrs: [],
        pics: []
      },
      normalOptions: [],
      checkedVal: true,
      url: uploadImg,
      headers: {
        Authorization: this.$store.state.token || ""
      }
    };
  },
  methods: {
    getCategoriesLists() {
      getCategoriesLists().then(res => {
        this.normalOptions = res.data;
      });
    },
    tabClick(val) {
      console.log(val);
      if (val.name === "2") {
        if (!this.normalData.goods_cat) {
          this.$message.error("请选择商品分类");
        } else {
          getManyAttr(
            this.normalData.goods_cat[this.normalData.goods_cat.length - 1]
          ).then(res => {
            this.normalData.attrs = res.data;
            for (let i = 0; i < this.normalData.attrs.length; i++) {
              this.normalData.attrs[i].attr_vals = this.normalData.attrs[
                i
              ].attr_vals.split(",");
            }
          });
        }
      } else if (val.name === "3") {
        if (!this.normalData.goods_cat) {
          this.$message.error("请选择商品分类");
        } else {
          getOnlyAttr(
            this.normalData.goods_cat[this.normalData.goods_cat.length - 1]
          ).then(res => {
            this.normalData.goods_attrs = res.data;
            console.log(res.data);
          });
        }
      }
    },
    //删除动态参数
    removeItem(index, _index) {
      this.normalData.attrs[index].attr_vals.splice(_index, 1);
    },
    uploadImg() {
      return uploadImg();
    },
    //上传图片成功
    getUrl(val) {
      let obj = {
        pic: val.data.tmp_path
      };
      this.normalData.pics.push(obj);
    },
    removeUrl(val) {
      let tmp_path = val.response.data.tmp_path;
      let index = this.normalData.pics.findIndex(item => {
        return item.pic === tmp_path;
      });
      this.normalData.pics.splice(index, 1);
    },
    //发布商品
    publicGoods() {
        this.normalData.goods_cat = this.normalData.goods_cat.join(',')
        publicGoods(this.normalData)
        .then(res => {
            this.$message({
                type: 'success',
                message: '添加成功'
            })
            this.$router.replace({
                name: 'goods'
            })
        })
    }
  },
  created() {
    this.getCategoriesLists();
  }
};
</script>
<style scoped lang="stylus">
.goods
  padding 15px
  background #fff
  border-radius 10px
  display flex
  flex-direction column
  flex 1
  overflow scroll
  .breadcrumb-wrap
    margin-bottom 20px
  .inpt-wrap
    display flex
    justify-content flex-start
    margin-bottom 20px
</style>
<style lang="stylus">
.step-wrap
  margin-top 20px
  .el-step__title
    font-size 14px
.tab-wrap 
    display flex
    height 100%
    .el-tabs__content
        overflow scroll


</style>